<template>
  <div class="app-container" :style="style">
    <el-row>
      <el-col :span="24" style="text-align: center">
        <span><h2>欢迎使用全渠道商品管理系统</h2></span>
      </el-col>
      <el-col :span="24" class="notice-head">
        <!--<el-card class="box-card">
          <div>
            <h3>系统公告</h3>
          </div>
        </el-card>-->
        <h3>系统公告</h3>
      </el-col>
    </el-row>
    <div :style="noticeStyle">
      <div
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
      >
        <notice v-for="(notice, index) in notices" :key="index" :index="index" :notice="notice" :parent="current" />
      </div>
      <el-row v-if="loading">
        <el-col :span="24" style="text-align:center">加载中...</el-col>
      </el-row>
    </div>
    <!--<el-row v-if="noMore">
      <el-col :span="24" style="text-align:center">没有更多了</el-col>
    </el-row>-->
  </div>
</template>
<script>
import notice from '@/views/system-manage/notice/notice'
import { queryPage } from '@/api/notice'
const pageSize = 10
export default {
  components: {
    notice
  },
  data() {
    return {
      current: this,
      style: 'height:' + (window.innerHeight * 0.88) + 'px;',
      noticeStyle: 'height:' + (window.innerHeight * 0.78) + 'px;overflow:scroll;padding-bottom:50px;',
      count: 0,
      params: { pageNum: 0, pageSize: pageSize, visible: 1 },
      total: 1,
      loading: false,
      notices: [],
      currentCount: 0,
      currentPage: 0
    }
  },
  computed: {
    noMore() {
      return this.count >= this.total
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  mounted() {
    window.addEventListener('resize', this.doLayout, true)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.doLayout, true)
  },
  created() {
    this.$nextTick(() => {
      this.load()
    })
  },
  methods: {
    doLayout() {
      if (this.style) {
        this.style = 'height:' + (window.innerHeight * 0.88) + 'px;'
      }
      if (this.noticeStyle) {
        this.noticeStyle = 'height:' + (window.innerHeight * 0.78) + 'px;overflow:scroll;padding-bottom:50px;'
      }
    },
    load() {
      this.loading = true
      var self = this
      setTimeout(() => {
        self.params.pageNum = self.currentPage
        queryPage(self.params).then(res => {
          if (res) {
            self.total = res.total
            if (res.data) {
              res.data.forEach(item => {
                self.notices.push(item)
              })
            }
            if (self.notices && self.notices.length && self.notices.length > 0) {
              self.count = self.notices.length
            }
            self.currentPage++
          }
          self.loading = false
        })
      }, 1500)
    }
  }
}
</script>
<style scoped>
.notice-head >>> .el-card__body {
  padding: 0px 0px 0px 20px;
}
.app-container .el-row{
  margin-bottom: 0px;
}
.app-container >>> .el-divider--horizontal{
  margin: 0px 0px 0px 0px;
}
</style>
